{extend name="base" /}
{block name="body"}
<style>

 .ui-main{ width:100%; height:auto; overflow:hidden; border:solid 1px #dcdcdc; margin:10px auto;}
 .table td{ padding:10px 7.5px; color:#333;font-size:14px;}
 .ui-steps{ width:688px; height:34px; border:solid 1px #dcdcdc; border-bottom:none;}
 .ui-steps span{ width:80px; height:24px; border:solid 1px #dcdcdc; display:block; float:left; margin:5px auto 0 12px; box-sizing:border-box; text-align:center; color:#999; font-size:14px; line-height:22px; cursor:pointer;}
 .ui-steps span.active{ background-color:#e6ffed; color:#5fb878; border:solid 2px #5fb878; line-height:20px;}
 .ui-tpl{ width:152px; height:auto; float:left; margin-right:10px; overflow:hidden; position:relative;}
 .ui-tpl .ui-tpldiv{ width:150px; height:180px; border:solid 1px #dcdcdc; overflow:hidden; position:relative; cursor:pointer;}
 .ui-tpl .ui-tpldiv img{ height:180px; display:block; margin:0px auto;}
 .ui-tpl .ui-only{ position:absolute; right:0; top:0; background-color:#fd6408; font-size:14px; padding:2px 5px; color:#fff; z-index:10;}
 .ui-tpl .ui-free{ position:absolute; right:0; top:0; background-color:#5fb878; font-size:14px; padding:2px 5px; color:#fff; z-index:10;}
 .ui-tpl .ui-inputlist{ height:27px; line-height:27px; color:#666; text-align:center; margin-top:3px;}
 .ui-tpl .ui-tpl-mask{ width:152px; height:182px; background-color:rgba(0,0,0,.5); position:absolute; left:0; top:0; display:none; cursor:pointer;color:#fff; font-size:14px;
 text-align:center; line-height:182px;}
 .ui-imgshow{ width:99px; height:99px; border:solid 1px #dcdcdc; float:left; box-sizing:border-box; overflow:hidden;}
 .ui-uploads{ width:100px; height:100px;float:left; margin-left:10px; cursor:pointer; position:relative;}
 .ui-uploads .layui-upload-button{ width:100px; height:100px; margin:0; padding:0;cursor:pointer;}
 .ui-uploads .layui-upload-button span.layui-upload-icon i{ display:block; margin:5px auto 0px auto; padding:0; position:relative; top:14px;}
 .ui-imgtips{ width:154px; height:100px; background:url('__IMAGES__/xuxian.png') no-repeat center center; color:#fa8406; margin-left:8px; float:left; box-sizing:border-box; font-size:12px;}
 .ui-imgtips img{ margin:15px auto 0 10px; float:left;}
 .ui-imgtips span{ line-height:170%; margin:10px 0 0 29px; display:block; width:112px;}
 .ui-uploads{ float:left;}
 .pub_tx{ display:none;}
 .layui-layer-content img{ width:100%; margin:10px; display:block; overflow:hidden;}
 .qrcode-img img{ display:block; margin:0px auto;}
 #cpoy_exam_url{ cursor:pointer;}
 .ui-laytips{ text-align:center; margin:26px auto 0px auto; line-height:180%; font-size:14px; color:#333;}
 .layui-layer-btn0{ background-color:#1aa194 !important;}
 .ui-laytips-img{ text-align:center;  margin:20px auto 20px auto; display:block; clear:both; overflow:hidden; width:110px;}
 .ui-laytips-img span.ui-imgss{ height:24px; width:24px !important; background:url('__IMAGES__/tip-error.png') no-repeat center center; overflow:hidden; margin:0; padding:0; display:block;float:left; margin-right:5px;}
 .ui-laytips-img span.ui-textss{color:#333; font-size:18px; float:left;display:block;}
</style>


<div class="layui-body" style="min-width:1400px;">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class=""><a href="{:url('orgadmin/examination/index')}">题集列表</a></li>
            <li class="layui-this">题集设置</li>
        </ul>
        
        <div class="ui-main">
       <form name="" action="###" method="post">         
          <table class="table" style="margin:15px auto 10px 0;">
            <tr>
              <td width="100" align="right" valign="top">分享图片</td>
              <td>
               <input type="hidden" name="sharepic" id="showpic" value="{$data['info']['sharepic']?:''}">
               <div class="ui-imgshow">
                 {if condition="$data['info']['sharepic'] neq ''"}
                  <img src="{$data['info']['sharepic']}" width="98" height="98">
                 {/if}
               </div>
               {if condition="$level gt 1"}
                {:uppic()}
               {else/}
                <div class="ui-uploads ui-update-even"><input id="pic" name="pic" type="hidden" value="" /><div class="layui-box layui-upload-button"><span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span></div></div>
               {/if}
               <div class="ui-imgtips">
                 <img src="__IMAGES__/tan_icon.png"> <span>支持5M以内的JPG,JPNG,PNG图片上传的图片用于在微信分享链接中显示.</span>
               </div>
              </td>
            </tr>
            <tr>
              <td width="100" align="right">信息收集</td>
              <td>
               <label><input type="radio" name="is_verify" value="2" class="" {if condition="$data['info']['is_verify'] eq 2"}checked{/if}> 填写后才能查看测评</label>
               <label style="margin:0 30px;"><input type="radio" name="is_verify" value="1" class="" {if condition="$data['info']['is_verify'] eq 1"}checked{/if}> 填写后才能开始答题</label>
               <label><input type="radio" name="is_verify" value="0" class="" {if condition="$data['info']['is_verify'] eq 0"}checked{/if}> 不要求</label>
              </td>
            </tr>
            <tr>
              <td align="right" valign="top" style="padding-top:18px;">测评模板</td>
              <td>
              
              <div style="width:860px;">
               {if condition="$level eq 4"}
                <div class="ui-tpl"> 
                  <div class="ui-tpldiv">
                    <img src="__IMAGES__/tp1.jpg">
                  </div>
                  <div class="ui-tpl-mask">点击预览大图</div>
                  <span class="ui-only">专属</span>
                  <p class="ui-inputlist"><label><input type="radio" name="template" value="5" {if condition="$data['info']['template'] eq 5"}checked{/if} class=""> 百夫长专属(WEB)</label></p>
                </div>
                {/if}
                
                <div class="ui-tpl"> 
                  <div class="ui-tpldiv">
                    <img src="__IMAGES__/tp3.jpg">
                  </div>
                  <div class="ui-tpl-mask">点击预览大图</div>
                  <p class="ui-inputlist"><label><input type="radio" name="template" value="1" {if condition="$data['info']['template'] eq 1"}checked{/if} class=""> 基础</label></p>
                </div>
                
                <div class="ui-tpl"> 
                  <div class="ui-tpldiv">
                    <img src="__IMAGES__/tp2.jpg">
                  </div>
                  <div class="ui-tpl-mask">点击预览大图</div>
                  <span class="ui-free">限时免费</span>
                  <p class="ui-inputlist"><label><input type="radio" name="template" value="2" {if condition="$data['info']['template'] eq 2"}checked{/if} class=""> 基础 + 做题反馈</label></p>
                </div>
                
                <div class="ui-tpl"> 
                  <div class="ui-tpldiv">
                    <img src="__IMAGES__/tp4.jpg">
                  </div>
                  <div class="ui-tpl-mask">点击预览大图</div>
                  <span class="ui-free">限时免费</span>
                  <p class="ui-inputlist"><label><input type="radio" name="template" value="3" {if condition="$data['info']['template'] eq 3"}checked{/if} class=""> 能力雷达</label></p>
                </div>
                
                <div class="ui-tpl"> 
                  <div class="ui-tpldiv">
                    <img src="__IMAGES__/tp5.jpg">
                  </div>
                  <div class="ui-tpl-mask">点击预览大图</div>
                  <span class="ui-free">限时免费</span>
                  <p class="ui-inputlist"><label><input type="radio" name="template" value="4" {if condition="$data['info']['template'] eq 4"}checked{/if} class=""> 能力雷达 + 做题反馈</label></p>
                </div>
               
               </div>
              </td>
            </tr>
            <tr>
              <td align="right">题集名称</td>
              <td><input type="text" name="name" value="{$data['info']['name']}" placeholder="" class="layui-input" style="width:690px;"></td>
            </tr>
            <tr>
              <td align="right" valign="top">宣传内容</td>
              <td>
               {if condition="$level eq 2 or $level eq 3 or $level eq 1"}
                 <span class="" style="display:none;">
                  <label><input type="radio" class="is_part" value="0" name="is_part" {if condition="$data['info']['is_part'] eq 0"}checked{/if}> 默认</label>
                  <label><input type="radio" class="is_part" value="1" name="is_part" {if condition="$data['info']['is_part'] eq 1"}checked{/if}> 分阶段</label>
                 </span>
               {else/}
               <div class="" style="margin-bottom:10px;">
                <label><input type="radio" class="is_part" value="0" name="is_part" {if condition="$data['info']['is_part'] eq 0"}checked{/if}> 默认</label>
                <label><input type="radio" class="is_part" value="1" name="is_part" {if condition="$data['info']['is_part'] eq 1"}checked{/if}> 分阶段</label>
               </div>
               
               <div class="ui-steps" {if condition="$data['info']['is_part'] eq 0"} style="display:none;"{/if}>
                 <span data-id="1">(0-25%)</span> 
                 <span data-id="2">(25-50%)</span> 
                 <span data-id="3">(50-75%)</span> 
                 <span data-id="4">(75-100%)</span> 
               </div>
               
               {/if}
               <textarea id="step" name="pub_text" class="pub_tx" placeholder="闪评测，让你有内容" style="width:688px; ">{$data['info']['pub_text']}</textarea>
               <textarea id="step1" name="pub_text1" class="pub_tx" placeholder="闪评测，让你有内容1" style="width:688px; ">{$data['info']['pub_text1']?:$pub_text}</textarea>
               <textarea id="step2" name="pub_text2" class="pub_tx" placeholder="闪评测，让你有内容2" style="width:688px; ">{$data['info']['pub_text2']?:$pub_text}</textarea>
               <textarea id="step3" name="pub_text3" class="pub_tx" placeholder="闪评测，让你有内容3" style="width:688px; ">{$data['info']['pub_text3']?:$pub_text}</textarea>
               <textarea id="step4" name="pub_text4" class="pub_tx" placeholder="闪评测，让你有内容4" style="width:688px; ">{$data['info']['pub_text4']?:$pub_text}</textarea>
              </td>
            </tr>
            <tr>
              <td align="right"></td>
              <td>
                <input type="hidden" value="{$id}" name="id">
				<button class="layui-btn btn-save" name="savename" type="button" value="保存">保存</button>
				<button type="button" data-href="{:url('orgadmin/examination/getExam',['id'=>$id])}" class="layui-btn layui-btn-primary preview">预览</button> 
              </td>
            </tr>
          </table>
</form>       
        </div> 

        
    </div>

</div>


<!--裁剪-->
<div class="crop-mask"></div>
<div class="crop-container">
<div class="imgcrop-main">
  <div class="modal-header">
    <span aria-hidden="true">&times;</span>
    <h4 class="modal-title" style="font-size:14px; line-height:45px;">设置分享图片 <font class="error"></font></h4>
  </div>
<div class="img-container">
 <img src="__IMAGES__/default_thumb.png" class="thumb_img">
 <div class="cropper-result">裁剪数据：左：<span class="c-l"></span>px，上：<span class="c-t"></span>px，宽度：<span class="c-w"></span>px，高度：<span class="c-h"></span>px &nbsp;&nbsp;</div>
</div>
<div class="modal-footer" style="text-align:right; background-color:#f1f1f1; border-top:solid 1px #dcdcdc; height:50px; overflow:hidden;">
    <button class="layui-btn btn-cropper" style="margin-top:5px;">确定</button>
    <button type="reset" class="layui-btn layui-btn-primary btn-close-cropper" style="margin-top:5px; margin-right:10px;">取消</button> 
</div>
</div>
</div>
<input id="size-w" type="hidden" value="300">
<input id="size-h" type="hidden" value="300">
<input id="img-x" type="hidden" value="0" placeholder="x">
<input id="img-y" type="hidden" value="0" placeholder="y">
<input id="img-h" type="hidden" value="0" placeholder="w">
<input id="img-w" type="hidden" value="0" placeholder="h">
<input id="img-r" type="hidden" value="0" placeholder="r">

{/block}
{block name="js"}
<script src="__JS__/ueditor/ueditor.config.js"></script>
<script src="__JS__/ueditor/ueditor.all.js"></script>
<link href="__CSS__/cropper.css" rel="stylesheet">
<script src="__JS__/jquery.form.js"></script>
<script src="__JS__/cropper.min.js"></script>
<script>
  var is_part = "{$data['info']['is_part']}";
  var h       = 514;
  var level   = "{$level}"; //gt 2有显示 ico分享
  var levname = "{$levname[$level]}";
  
  ue1 = new UE.ui.Editor();
  ue1.render('step');
  if ( level <3 ) {
	if ( level  == 1 ) {
      ue1.ready(function() {ue1.setHeight(h);
	    ue1.setDisabled();
      });
	} else {
      ue1.ready(function() {ue1.setHeight(h);
	  //ue1.setDisabled();
      });
	}
  } else {
    ue1.ready(function() {ue1.setHeight(h);});
  }
  

  
  //ue1.setDisabled();
  
  ue2 = new UE.ui.Editor();
  ue2.render('step1');
  ue2.ready(function() {ue2.setHeight(h);});

  ue3 = new UE.ui.Editor();
  ue3.render('step2');
  ue3.ready(function() {ue3.setHeight(h);});
  
  ue4 = new UE.ui.Editor();
  ue4.render('step3');
  ue4.ready(function() {ue4.setHeight(h);});
  
  ue5 = new UE.ui.Editor();
  ue5.render('step4');
  ue5.ready(function() {ue5.setHeight(h);});

  if ( is_part == '0' ) {
    $(".pub_tx").hide();
	$(".pub_tx").eq(0).show();
  } else {
    $(".pub_tx").hide();
	$(".ui-steps span").eq(0).addClass('active');
	$(".pub_tx").eq(1).show();
	
  }
  
  $(".ui-steps span").click(function(e) {
    var id = $(this).data('id');
	$(".ui-steps span").removeClass('active');
	$(this).addClass('active');  
	$(".pub_tx").hide();
	$("#step"+id).show(); 
	$(".is_part").eq(1).attr('checked',true);
  });
  
  $(".is_part").click(function(e) {
    var is_parts = $(".is_part:checked").val();
	if ( is_parts == 0 ) {
      $(".pub_tx").hide();
	  $(".ui-steps").hide();
	  $(".ui-steps span").removeClass('active');
	  $(".pub_tx").eq(0).show();
	} else {
      $(".pub_tx").hide();
	  $(".ui-steps").show();
	  $(".ui-steps span").removeClass('active');
	  $(".ui-steps span").eq(0).addClass('active');
	  $("#step1").show(); 
	} 
  });
  
  //图片预览
  $(".ui-tpldiv").click(function(e) {
	var html = $(this).html();
	layer.open({
		type: 1,
		title: '大图预览',
		content: html,
		area: ['700px', '520px'],
		success: function(layero, index){}
	});
  });
  $(".ui-tpl-mask").click(function(){
	var html =$(this).parent().find(".ui-tpldiv").html();
	if(html){
		layer.open({
			type: 1,
			title: '大图预览',
			content: html,
			area: ['700px', '520px'],
			success: function(layero, index){}
		});
	}	  
  });
  
  $(".ui-tpl").each(function(ieq, e) {
    if ( $(this).find("input:checked").length > 0 ) $(this).find(".ui-tpl-mask").show();
  });
  
  $(".ui-inputlist label").click(function(e) {
	var id = $(this).find("input").val();
	if ( id == 5 && level != 4 ) {
	   even_update();
	   return false;
	}
	$(".ui-tpl-mask").hide();
    $(this).parent().parent().find('.ui-tpl-mask').show();
  });
  
  $(".ui-update-even").click(function(e) {
	   	layer.open({
			type: 1,
			title: '用户升级',
			btn: ['关闭'],
			content: '<div class="ui-laytips">您当前的用户等级为：<font color="#5fb878">'+levname+'</font><br/>升级到<font color="#5fb878">白金</font>才能使用该功能<br/>洽谈请联系软云商务<font color="#5fb878">400-180-6266</font></div>',
			area: ['320px', '210px'],
			success: function(layero, index){}
		}); 
  });
  
  //提示升级
  function even_update(){
	   	layer.open({
			type: 1,
			title: '用户升级',
			btn: ['关闭'],
			content: '<div class="ui-laytips">您当前的用户等级为：<font color="#5fb878">'+levname+'</font><br/>升级到<font color="#5fb878">百夫长</font>才能使用该模板<br/>洽谈请联系软云商务<font color="#5fb878">400-180-6266</font></div>',
			area: ['320px', '210px'],
			success: function(layero, index){}
		});
  }
  //layer.msg('xxx',{icon: 5}); 错误
  var img = '__UPLOAD__';
  //上传
 
  $(document).ready(function(e) {
	  var uploaduri = '{:url("orgadmin/examination/uploadpic")}';
	  if( $("#uppic").length>0 ){
		  $(function () {
			$("#uppic").wrap("<form id='uppicform' action='"+uploaduri+"' enctype='multipart/form-data' method='post'></form>");
			$("#uppic").change(function(){
				var iswater = 0;
				$("#uppicform").ajaxSubmit({
					dataType : 'json',
					data     : {'iswater':iswater,'width':$(".cutswidth").val(),'height':$(".cutsheight").val()},
					beforeSend: function() {
					  
					},
					success: function(data) {
					  if ( data.error!='' ) {
					    layer.msg(data.error,{icon: 5});
					  } else {
					    $("#showpic").val(data.file);
						$(".thumb_img").attr('src',img+'/images/'+data.file);
						//$(".ui-imgshow").html('<img src="'+img+'/images/'+data.file+'" width="98" height="98">');
						croppic();
					  }
					},
					error:function(xhr){}
				});
			});
		 });
	 }
	  //
	 function croppic(){
		  var size_w = parseInt($("#size-w").val());
		  var size_h = parseInt($("#size-h").val());
		  var aspectRatio = (size_w > 0 && size_h > 0) ?  size_w/size_h : null;
		  $(".img-container img").cropper('destroy');
		  var cropoption = { minContainerWidth: 320,minContainerHeight: 180,zoomin: null,zoomout: null,movable:true,aspectRatio: aspectRatio,
							  crop: function (data) {
								$('#img-x').val(Math.round(data.x));
								$('#img-y').val(Math.round(data.y));
								$('#img-h').val(Math.round(data.height));
								$('#img-w').val(Math.round(data.width));
								$('#img-r').val(Math.round(data.rotate));
								$(".c-w").text(Math.round(data.width));
								$(".c-h").text(Math.round(data.height));
								$(".c-l").text(Math.round(data.x));
								$(".c-t").text(Math.round(data.y));
							  }
						  };
		  $(".img-container img").on({
		   'build.cropper': function (e) {},
		   'built.cropper': function (e) {},
		   'dragstart.cropper': function (e) {},
		   'dragmove.cropper': function (e) {},
		   'dragend.cropper': function (e) {},
		   'zoomin.cropper': function (e) {},
		   'zoomout.cropper': function (e) {}
		  }).cropper(cropoption);
		  $(".crop-container,.crop-mask").fadeIn(500);
	  }
	  $("body").on("click",".btn-close-cropper,.crop-mask,.modal-header span",function(data){
		$(".crop-container,.crop-mask").fadeOut(500);
	  });
	
	  $("body").on("click",".btn-cropper",function(){
		var $this= $(this);
		var path = $("#showpic").val();
		var x    = $("#img-x").val();
		var y    = $("#img-y").val();
		var w    = $("#img-w").val();
		var h    = $("#img-h").val();
		var r    = $("#img-r").val();
		var iswater = ($(".nowater").length>0) ? 1 : 0; //是否添加水印 1表示绝对不添加
		var delpic  = ($(".nodeloriginal").length>0) ? 1 : 0; //是否删除原图 1表示不删除
		if ( path == '' ) {
		  layer.msg('裁剪路径为空，请上传一张裁剪的图片吧',{icon: 5}); return false;
		}
		if ( w == 0 || h == 0 ) {
		  layer.msg('裁剪宽度和高度不能为0',{icon: 5}); return false;
		}
		//layer.msg('裁剪宽度和高度不能为0',{icon: 5,zIndex:10000}); return false;
		var ii = layer.load();
		$.post('{:url("orgadmin/examination/croppic")}',{'path':path,'x':x,'y':y,'w':w,'h':h,'r':r,'iswater':iswater,'delpic':delpic},function(data){
		  layer.close(ii);
		  if ( data.state == 1 ) {
			$(".crop-container,.crop-mask").fadeOut(500);
			$("#showpic").val(data.file);
			$(".ui-imgshow").html('<img src="'+data.file+'" width="98" height="98">');
		  } else {
			layer.msg(data.msg,{icon: 5}); return false;
		  }
		},'json');
	  });
	  
  });
  //上传
  
  
	$('.preview').on('click',function(){
		var _href = $(this).attr('data-href');
		
		$.ajax({
			url: _href,
			type: "get",
			success: function (info) {
				if (info.code === 1) {
					var qrcode = info.info.qrcode;
					var url = info.info.exam_url;
					
					var html = '<div id="exam-qrcode" class="layui-form-item"><div class="layui-block"><div class="layui-block qrcode-img">'
							 + '<img src="'+ qrcode +'"></div><div class="layui-block tips-text">使用微信扫描可预览题集</div></div>'
							 + '<div class="layui-block"><label class="layui-form-label">题集链接:</label><div class="layui-input-inline">'
							 + '<input  readonly="readonly" id="exam_url" type="text" name="exam_url" value="'+ url +'" class="layui-input layui-input-inline"/></div>'
							 + '<div  id="cpoy_exam_url" data-clipboard-text="'+url+'" class="layui-inline copy-url">复制链接</div></div></div>';
					
					layer.open({
						type: 1,
						title: '题集预览',
						content: html,
						btn: ['关闭'],
						area: ['450px', '410px'],
						success: function(layero, index){
							var btn = document.getElementById('cpoy_exam_url');
							var clipboard = new Clipboard(btn);
							//复制成功执行的回调，可选
							clipboard.on('success', function(e) {
								layer.msg('复制成功');
							});
							clipboard.on('error', function(e) {
								layer.msg('复制失败');
							});
						}
					})
				}else{
					layer.msg(info.msg);
				}
			}
		});
	});
	
	$(".btn-save").click(function(e) {
      var $this = $(this);
	  var sharepic  = $("#showpic").val();
	  var is_verify = $("input[name='is_verify']:checked").val();  
	  var template  = $("input[name='template']:checked").val();
	  var name      = $("input[name='name']").val();
	  var is_part   = $("input[name='is_part']:checked").val();
	  var id        = $("input[name='id']").val();
	  if($.trim(name) == ''){
		layer.msg('请填写题集名称！');
		return;
	  }
	  var pub_text = ue1.getContent();
	  var pub_text1 = ue2.getContent();
	  var pub_text2 = ue3.getContent();
	  var pub_text3 = ue4.getContent();
	  var pub_text4 = ue5.getContent();
	  $this.attr('disabled',true).text('保存中..'); 
	  $.post('{:url("orgadmin/examination/saveexam")}',{'sharepic':sharepic,'is_verify':is_verify,'template':template,'name':name,'is_part':is_part,'id':id,'pub_text':pub_text,'pub_text1':pub_text1,'pub_text2':pub_text2,'pub_text3':pub_text3,'pub_text4':pub_text4},function(data){
		$this.attr('disabled',false).text('保存'); 
		if ( data.state == 1 ) {
		  layer.msg('保存成功！');
		} else if ( data.state == 0 ) {
		  layer.msg(data.msg);
		} else if ( data.state == 2 || data.state == 3 ) {
	   	  layer.open({
			type: 1,
			title: '用户升级',
			btn: ['关闭'],
			content: '<div class="ui-laytips"><div class="ui-laytips-img"><span class="ui-imgss"></span><span class="ui-textss">保存失败</span></div>当前的用户等级为：<font color="#5fb878">'+levname+'</font><br/>升级到<font color="#5fb878">钻石</font>才能在宣传信息中添加链接，视频<br/>洽谈请联系软云商务<font color="#5fb878">400-180-6266</font></div>',
			area: ['320px', '250px'],
			success: function(layero, index){}
		  });  
		}
	  },'json');
	  
    });
  
</script>
{/block}